<script setup lang="ts">

import { ref } from "vue";

const articles = ref([])

const articleModel = ref({
  title: '',
  content: ''
})

// 分页条数据模型
const pageNum = ref(1)// 当前页
const total = ref(20)// 总条数
const pageSize = ref(10)// 每页条数


import { addArticleService, getArticleService, likeArticleService } from '@/api/article.js'
// 获取文章信息
const getArticle = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }
  let result = await getArticleService(params);
  total.value = result.data.total
  articles.value = result.data.records
}
getArticle()

// 当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  // 刷新页面
  getArticle()
}
// 当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  // 刷新页面
  getArticle()
}



// 抽屉开关
const visibleDrawer = ref(false)
const direction = ref('ltr')
// 打开抽屉方法，后续进行数据处理
const skipDetail = (row) => {
  router.push(`/article/${row.id}`)
}
// 如果是当前用户，显示编辑按钮


// 添加文章
const addArticle = async () => {
  await addArticleService(articleModel.value);
  ElMessage.success("添加成功")
  // TODO 刷新页面,清空添加时的数据
  visibleDrawer.value = false
  articleModel.value.title = ''
  // 富文本编辑器的清空用''不行
  articleModel.value.content = '<div>'


  getArticle()
}

// 空数据时加一个漫游式引导
import { ButtonInstance, ElMessage } from 'element-plus'

const ref1 = ref<ButtonInstance>()

const open = ref(false)

// 文本编辑器
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import router from "@/router";


// 点赞
const like = async (id) => {
  await likeArticleService(id);
  getArticle()
}

</script>

<template>
  <!--后续根据加的搜索框会改变height-->
  <el-table :data="articles" stripe :header-cell-style="{ backgroundColor: 'aliceblue', color: '#666' }"
    max-height="80vh" class="table">
    <el-table-column prop="number" align="center" label="学号"></el-table-column>
    <el-table-column prop="name" align="center" label="姓名"></el-table-column>
    <el-table-column prop="title" align="center" label="标题"></el-table-column>
    <el-table-column align="center" label="点赞">
      <template #default="{ row }">
        <span class="like-number">{{ row.liked }}</span>
        <span v-if="row.isLike">
          <span class="iconfont dn-icon-liked" @click="like(row.id)"></span>
        </span>
        <span v-else>
          <span class="iconfont dn-icon-like" @click="like(row.id)"></span>
        </span>
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="{ row }">
        <el-button type="primary" round @click="skipDetail(row)">打开</el-button>
      </template>
    </el-table-column>
    <!--无数据显示-->
    <template #empty>
      <el-empty description="暂时没有人发布，快来发一个吧！">
        <el-button type="primary" @click="open = true">那就来一个吧</el-button>
      </el-empty>
    </template>
  </el-table>

  <!-- 漫游式引导 -->
  <el-tour v-model="open">
    <el-tour-step :target="ref1?.$el" title="温馨提示：">
      <div>在这发布哦</div>
    </el-tour-step>
  </el-tour>

  <!-- 抽屉内容 -->
  <el-drawer v-model="visibleDrawer" title="分享有趣事" :direction="direction" size="50%">
    <!-- 添加文章表单 -->
    <el-form :model="articleModel" label-width="100px">
      <el-form-item label="文章标题">
        <el-input v-model="articleModel.title" placeholder="请输入标题"></el-input>
      </el-form-item>

      <el-form-item label="文章内容">
        <div class="editor">
          <quill-editor theme="snow" v-model:content="articleModel.content" contentType="html" :toolbar="[
            ['bold', 'italic', 'underline', 'strike'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ script: 'sub' }, { script: 'super' }],
            [{ size: ['small', false, 'large', 'huge'] }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            [{ color: [] }, { background: [] }],
            [{ align: [] }],
            ['link', 'video', 'image'],
            ['clean'],]" />

        </div>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 90%;" type="primary" @click="addArticle()">发布</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>

  <!--添加新文章，ref和引导绑定-->
  <el-affix position="bottom" :offset="20" class="bottom-right-affix" @click="visibleDrawer = true">
    <el-button type="primary" ref="ref1">分享有趣事</el-button>
  </el-affix>


  <!-- 分页条 -->
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
    layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
    @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />


</template>

<style lang="scss" scoped>
.table {
  width: 80%;
  margin: 0 auto;
}

/*表格下面在打开抽屉时会有一条线*/
.el-table__inner-wrapper::before {
  height: 0;
}

/* 分享有趣事固钉 */
.bottom-right-affix {
  position: fixed;
  right: 20px;
  top: 88px;
}


/* 编辑器 */
.editor {
  width: 100%;

  ::v-deep(.ql-editor) {
    min-height: 200px;
  }
}

/* 点赞总数样式，防止因为位数不一样导致后面的点赞图标变换位置 */
.like-number {
  user-select: none;
  display: inline-block;
  width: 50px;
  /* 调整这个值以适应你的需求 */
}
</style>